<include file="Public/mobile_head_list_jquery"/>
<body>

<style type="text/css">
    a{text-decoration: none}
    .banner{ width:100%; overflow:hidden; position:relative;}
    .banner ul{ position:absolute; left:0; top:0; z-index:10; -webkit-animation:}
    .banner ul li{ float:left; display:table-cell; position:relative}
    .banner li a{ width:100%; height:100%; display:block;}
    .banner li .title{background-color:RGBA(0,0,0,.5); height:30px; color:#fff; line-height:30px; padding-left:10px; position:absolute; left:0; bottom:0; width:100%; z-index:1000;}
    .identify{text-align:right; position:absolute; bottom:0; right:0; z-index:100; height:30px;}
    .identify em{ display:inline-block; margin:10px 5px;-webkit-border-radius: 6px;-moz-border-radius: 6px;
        border-radius: 6px;margin-left: 5px;width: 12px;height: 12px;background: #fff;}
    .identify em.cur{ background-color:#090}
    .small_pic_list li{ border-top:1px solid #fff; border-bottom:1px solid #ccc; height:80px; overflow:hidden;}
    .small_pic_list li a{ display:block; padding:10px 10px 10px 80px; position:relative; min-height:60px; color:#333}
    .small_pic_list li a:active{ background-color:#CCC}
    .small_pic_list li a img{ position:absolute; left:10px; top:10px; width:60px; height:60px;}
    .small_pic_list li a h6{ font-size:18px; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .small_pic_list li a .h6{ margin-top: 0px;margin-bottom: 0px}
    .small_pic_list li a div{ display: inline-block;padding-top: 15px;}
    .small_pic_list li a p{ color:#999; font-size:13px; line-height:22px;}

</style>

<div class="easyui-navpanel">
    <header>
        <div class="m-toolbar">
            <div class="m-title">课程列表</div>
            <div class="m-left">
                <a href="__SELF__" class="easyui-linkbutton" data-options="plain:true">全部</a>
            </div>
            <div class="m-right">
                <a href="javascript:void(0)" class="easyui-menubutton" data-options="iconCls:'icon-more',plain:true,hasDownArrow:false,menu:'#mm',menuAlign:'right'"></a>
            </div>
        </div>
    </header>
    <div id="mm" class="easyui-menu" style="width:150px;" data-options="itemHeight:30,noline:true">
        <div data-options="iconCls:'icon-undo'"><a href="__SELF__">全部</a></div>
        <div class="menu-sep"></div>
        <div>升学</div>
        <div class="menu-sep"></div>
        <div>语文</div>
        <div>数学</div>
        <div>英语</div>
    </div>
    <div class="easyui-tabs" data-options="tabHeight:60,fit:true,tabPosition:'bottom',border:false,pill:true,narrow:true,justified:true">
        <div style="padding:10px">
            <div class="panel-header tt-inner">
                <br>公开课表
            </div>
            <span>
                <ul class="small_pic_list " style="margin-left: 0px;padding-left: 0px;margin-top: 0px;"  data-options="
                fit: true,
                lines: true,
                border: false,
                textFormatter: function(value){
                    return '<a href\'javascript:void(0)\' class=\'datalist-link\'>' + value + '</a>';
                },
                onClickRow: function(index,row){
                    $('#p2-title').html(row.text);
                    $.mobile.go('#p2');
                }
                ">
                    <volist name="list_data" id="vo">
                        <li>
                            <a href="{:U('detail', 'id='.$vo[id])}">
                                <notempty name="vo.cover"><img src="{$vo.cover|get_cover_url}"/></notempty>
                                <h6 class="h6">{$vo.title}</h6>
                                <div class="colorless">{$vo.cTime|time_format}</div>
                                <div style="padding-left: 20px;">{$vo.author}</div>
                                <div style="float: right;"><span style="color: #f00">333</span>人报名</div>
                            </a>
                        </li>
                    </volist>
                </ul>
                <!-- 分页 -->
                <div class="page"> {$_page|default=''} </div>
            </span>
        </div>
        <div style="padding:10px">
            <div class="panel-header tt-inner">
                <br>我的公开课
            </div>
            <span>
                <ul class="small_pic_list" style="margin-left: 0px;padding-left: 0px;margin-top: 0px;">
                    <li>
                        <a href="http://local.com/gongkaike/index.php?s=/addon/WeiSite/WeiSite/detail/id/1.html">
                            <img src="http://local.com/gongkaike/Uploads/Picture/2016-03-25/56f4adbc8316a.jpg"/>                                <h6 class="h6">海风第一期公开课</h6>
                            <div class="colorless">2016-03-24 14:51</div>
                            <div style="padding-left: 20px;">第一期公开课简介</div>
                            <div style="float: right;"><span style="color: #f00">333</span>人报名</div>
                        </a>
                    </li>                        </ul>
                <!-- 分页 -->
                <div class="page">  </div>
            </span>

        </div>
    </div>
</div>
<style scoped>
    .tt-inner{
        display:inline-block;
        line-height:12px;
        padding-top:5px;
    }
    p{
        line-height:150%;
    }
</style>


<div id="p2" class="easyui-navpanel">
    <header>
        <div class="m-toolbar">
            <span id="p2-title" class="m-title">Detail</span>
            <div class="m-left">
                <a href="javascript:void(0)" class="easyui-linkbutton m-back" plain="true" outline="true" style="width:50px" onclick="$.mobile.back()">Back</a>
            </div>
        </div>
    </header>
    <div style="margin:50px 0 0;text-align:center">
        <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100px;height:30px" onclick="$.mobile.back()">Go Back</a>
    </div>
</div>

<?php exit(); ?>

<style type="text/css">
    .banner{ width:100%; overflow:hidden; position:relative;}
    .banner ul{ position:absolute; left:0; top:0; z-index:10; -webkit-animation:}
    .banner ul li{ float:left; display:table-cell; position:relative}
    .banner li a{ width:100%; height:100%; display:block;}
    .banner li .title{background-color:RGBA(0,0,0,.5); height:30px; color:#fff; line-height:30px; padding-left:10px; position:absolute; left:0; bottom:0; width:100%; z-index:1000;}
    .identify{text-align:right; position:absolute; bottom:0; right:0; z-index:100; height:30px;}
    .identify em{ display:inline-block; margin:10px 5px;-webkit-border-radius: 6px;-moz-border-radius: 6px;
        border-radius: 6px;margin-left: 5px;width: 12px;height: 12px;background: #fff;}
    .identify em.cur{ background-color:#090}
    .small_pic_list li{ border-top:1px solid #fff; border-bottom:1px solid #ccc; height:80px; overflow:hidden;}
    .small_pic_list li a{ display:block; padding:10px 10px 10px 80px; position:relative; min-height:60px; color:#333}
    .small_pic_list li a:active{ background-color:#CCC}
    .small_pic_list li a img{ position:absolute; left:10px; top:10px; width:60px; height:60px;}
    .small_pic_list li a h6{ font-size:18px; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .small_pic_list li a p{ color:#999; font-size:13px; line-height:22px;}
</style>
<body id="weisite">

<div class="container">
    <ul class="small_pic_list" style="margin-left: 0px;padding-left: 0px;">
        <volist name="list_data" id="vo">
            <li>
                <a href="{:U('detail', 'id='.$vo[id])}">
                    <notempty name="vo.cover"><img src="{$vo.cover|get_cover_url}"/></notempty>
                    <h6>{$vo.title}</h6>
                    <p>{$vo.intro}</p>
                    <span class="colorless">{$vo.cTime|time_format}</span>
                </a>
            </li>
        </volist>
    </ul>
    <!-- 分页 -->
    <div class="page"> {$_page|default=''} </div>
</div>
<!-- 底部导航 -->
{$footer_html}
<!-- 统计代码 -->
<notempty name="config.code">
    <p class="hide bdtongji">
        {$config.code}
    </p>
    <else />
    <p class="hide bdtongji">
        {$tongji_code}
    </p>
</notempty>
</body>
<script type="text/javascript">
    $(function(){
        //$.WeiPHP.initBanner(true,5000);
    })

</script>
</html>